<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/template.xhtml">
	<ui:define name="body">
		<h:form id="main">
			<p:hotkey bind="n" handler="clickButton('main:btnNew')" />
			<p:hotkey bind="r" handler="clickButton('main:btnReset')" />
			<p:growl id="growl" life="4000" showDetail="true" autoUpdate="true" />
			<p:panel header="User Search Form" style="width: 700;"  toggleable="true">

				<p:panelGrid columns="4" cellpadding="2" id="panelSearch">


					<f:facet name="footer" style="text-align: right">
						<p:commandButton id="btnSearch" value="Search"
							action="#{userMgb.search}" ajax="true" icon="ui-icon-search"
							update="panelResult" />

						<p:commandButton value="Reset" update="panelSearch, panelResult"
							icon="ui-icon-arrowreturnthick-1-w" immediate="true"
							action="#{userMgb.reset}" process="@this" id="btnReset" />

						<p:commandButton id="btnNew" value="New"
							oncomplete="rowDialog.show()" action="#{userMgb.add}"
							icon="ui-icon-circle-plus"  update=":detail:display"/>

					</f:facet>

					<p:outputLabel value="User Id" />
					<p:inputText value="#{userMgb.userIdSearch}" label="userId" id="idSearch" />
					<p:outputLabel value="User Name" />
					<p:inputText value="#{userMgb.userNameSearch}" label="UserName" id="nameSearch" />
					

				</p:panelGrid>

				<p:blockUI block="panelSearch" trigger="btnSearch" />
			</p:panel>
			 
			<p:panel id="panelResult">
				
				<p:dataTable var="row" value="#{userMgb.resultSearch}"
					selectionMode="single" rowKey="#{row.userId}" style="width: 700"
					selection="#{userMgb.selected}" id="dataResult"
					paginator="true" rows="#{constDataTable.pageRows}"
					paginatorTemplate="#{constDataTable.paginatorTemplate}"
					rowsPerPageTemplate="#{constDataTable.rowsPerPageTemplate}"
					scrollable="true" scrollHeight="#{constDataTable.scrollHeight}"
					binding="#{userMgb.dtResult}"
				>

					<p:column sortBy="#{row.userId}">
						<f:facet name="header">
							<h:outputText value="User Id" />
						</f:facet>
						<p:commandLink value="#{row.userId}"
							action="#{userMgb.view(row)}" oncomplete="rowDialog.show()"
							update=":detail:display" id="linkDetail" />

					</p:column>

					<p:column sortBy="#{row.userName}">
						<f:facet name="header">
							<h:outputText value="User Name" />
						</f:facet>
						<h:outputText value="#{row.userName}" />
					</p:column>

					<p:column sortBy="#{row.description}">
						<f:facet name="header">
							<h:outputText value="Description" />
						</f:facet>
						<h:outputText value="#{row.description}" />
					</p:column>

					<p:column sortBy="#{row.active}">
						<f:facet name="header">
							<h:outputText value="Active" />
						</f:facet>
						<h:outputText value="#{row.active}" />
							
					</p:column>

					<f:facet name="footer">
						<h:outputText
							value="Total: #{fn:length(userMgb.resultSearch)}" id="rowCount"/>
							
					</f:facet>
				</p:dataTable>
			
			</p:panel>
			<h:commandLink id="pdf">
              <p:outputLabel value="Export"></p:outputLabel>
                <p:dataExporter type="csv" target="dataResult" fileName="users"/>
            </h:commandLink>
		</h:form>
		<h:form id="detail">
			<p:dialog id="dialog" header="User Detail" widgetVar="rowDialog"
				resizable="true" width="400" showEffect="clip" hideEffect="explode"
				position="center center" closeOnEscape="true">

				<h:panelGrid id="display" columns="2" cellpadding="2">
					
					<p:outputLabel value="User Id:" rendered="#{userMgb.selected.userId!=null}" />
					<p:inputText value="#{userMgb.selected.userId}" disabled="true" rendered="#{userMgb.selected.userId!=null}" />						

					<p:outputLabel value="User Name:" />
					<p:inputText value="#{userMgb.selected.userName}"
						style="width: 150px" required="true" label="User Name"
						id="userName" />
					<p:outputLabel value="Password:" />
					<p:password value="#{userMgb.selected.password}"
						style="width: 150px" required="true" label="Password"
						id="password" redisplay="true"/>
					<p:outputLabel value="Description:" />
					<p:inputText value="#{userMgb.selected.description}"
						style="width: 150px" label="Description" id="description"/>
					<p:outputLabel value="Active:" />
					<p:selectBooleanButton value="#{userMgb.selected.active}" onLabel="Yes" offLabel="No" rendered="#{userMgb.selected!=null}" />
					
					<f:facet name="footer">
						<p:commandButton id="btnSave" value="Save" icon="ui-icon-check"
							action="#{userMgb.save}"
							oncomplete="handleDialog(xhr, status, args, rowDialog)"
							update=":main:growl :main:panelResult" />
						<p:commandButton id="btnDelete" value="Delete"
							icon="ui-icon-circle-minus"
							onclick="confirmation.show();return false;"
							oncomplete="rowDialog.hide()"
							rendered="#{userMgb.selected.userId!=null}" />

						<p:commandButton id="btnCancel" value="Cancel"
							icon="ui-icon-cancel" oncomplete="rowDialog.hide()"
							process="@this">
							<p:resetInput target=":detail:display" />
						</p:commandButton>
					</f:facet>
				</h:panelGrid>
			</p:dialog>
			<p:confirmDialog id="confirmDialog"
				message="Do you want to delete record?" header="Confirm"
				severity="alert" widgetVar="confirmation" appendTo="@(body)">

				<p:commandButton id="confirm" value="Yes"
					update=":main:growl :main:panelResult"
					oncomplete="rowDialog.hide(); confirmation.hide()"
					action="#{userMgb.delete}" process="@this" />
				<p:commandButton id="decline" value="No"
					onclick="confirmation.hide();rowDialog.hide();" />

			</p:confirmDialog>
		</h:form>
	</ui:define>

</ui:composition>
</html>